<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
import { on, off } from 'view-ui-plus/src/utils/dom';
import { setMatchMedia } from 'view-ui-plus/src/utils/assist';

setMatchMedia();

export default {
  name: 'app',
  beforeUnmount() {
    off(window, 'resize', this.handleWindowResize);
  },
  mounted() {
    on(window, 'resize', this.handleWindowResize);
    this.handleMatchMedia();
    this.handleSetBodyHeight();
    this.onLoadLayoutSetting()

    if (!window.location.href.includes('/login')) {
      this.$store.dispatch("admin/common/initUserInfo")
      this.$store.dispatch('admin/role/init')
      this.$store.dispatch('admin/user/init')
      // this.$store.dispatch("admin/common/initPublicConfig", {
      //   domain: 'https://admin.sparknt.cn'
      // }).then(() => {
      //   this.$store.dispatch('admin/menu/refreshMenuList');
      // })
    }
  },
  methods: {
    ...mapMutations('admin/layout', [
      'setDevice',
      'setBodyHeight',
      'updateLayoutSetting'
    ]),
    handleWindowResize() {
      this.handleMatchMedia();
      this.handleSetBodyHeight();
    },
    handleMatchMedia() {
      const matchMedia = window.matchMedia;

      if (matchMedia('(max-width: 600px)').matches) {
        this.setDevice('Mobile');
      } else if (matchMedia('(max-width: 992px)').matches) {
        this.setDevice('Tablet');
      } else {
        this.setDevice('Desktop');
      }
    },
    handleSetBodyHeight() {
      this.setBodyHeight(document.body.offsetHeight);
    },
    onLoadLayoutSetting() {
      if (localStorage.getItem('isNightMode') === 'isNightMode') {
        this.onChangeNightMode(true)
      } else {
        this.onChangeNightMode(false)
      }
    },
    onChangeNightMode(value) {
      this.updateLayoutSetting({
        key: 'headerTheme',
        value: value ? 'dark' : 'light'
      });
      this.updateLayoutSetting({
        key: 'isNightMode',
        value: value
      });
      if (value) {
        document.getElementsByTagName('body')[0].classList.add('ivu-theme-dark');
      } else {
        document.getElementsByTagName('body')[0].classList.remove('ivu-theme-dark');
      }
    },
  }
}
</script>
